<template>
  <div class="sea-table-header">
    <el-row>
      <el-col :span="8">

        <!-- 允许设置一个标题-->
        <slot name="title"></slot>

        <div style="margin-top: 8px;">
          <!-- 操作按钮区 -->
          <div class="pull-left" style="margin-right: 16px;">
            <slot name="buttons"></slot>
          </div>

          <!-- 快捷查询 -->
          <el-form @submit.native.prevent="onSubmit">
            <el-input v-model="keyword" placeholder="请输入内容" style="width: 200px;" size="small">
              <el-button slot="append" icon="fa fa-search" @click="onSubmit"></el-button>
            </el-input>
          </el-form>
        </div>
      </el-col>
      <el-col :span="16" v-if="!disabledForm">
        <div style="width: calc(100% - 36px);float: left;">
          <el-row>
            <form v-show="expand" class="el-form">
              <smart-form-group ref="form" :trigger="trigger" :object="params">

                <!-- 输入框区域 -->
                <slot name="input"></slot>

                <!-- 搜索按钮 -->
                <el-col :span="6" style="padding-left: 10px">
                  <div class="sea-table-header-buttons">
                    <el-button size="small" type="primary" @click="onSubmit" :loading="loading">查询</el-button>
                    <el-button size="small" @click="onReset" :loading="loading">重置</el-button>
                  </div>
                </el-col>
              </smart-form-group>
            </form>
          </el-row>
        </div>

        <!-- 展开按钮 -->
        <div style="width: 32px;float: right;">
          <el-button size="small" title="展开" @click="switchExpand"
                     :icon="expand? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */
import SmartFormGroup from '@/widget/smart-form/src/smart-form-group.vue'

/**
 * 通用表头
 *
 * 要求使用 smart 前缀的配套组件
 */
export default {
    name: "SmartTableHeader"
    , components: {SmartFormGroup}
    // 通过 inject，直接获取 dataTable 对象实例
    , inject: ['dataTable']
    , props: {
        // 触发器，数据联动逻辑
        trigger: {type: Function, default: undefined}
        // 禁用表单
        , disabledForm: {type: Boolean, default: false}
        // 禁用表单
        , params: {type: Object, default: undefined}
    }
    , data() {
        return {
            // 展开表单
            expand: false
            // 关键字
            , keyword: ''
        }
    }
    , computed: {
        loading: function () {
            return this.dataTable.loading;
        }
    }
    , methods: {
        /**
         * 面板全屏展示
         */
        fullscreen: function () {
            this.dataTable.fullscreen();
        }
        /**
         * 展开搜索栏，默认搜索栏处于隐藏状态
         */
        , switchExpand: function () {
            this.expand = !this.expand
        }
        /**
         * 点击了提交按钮
         */
        , onSubmit: function () {
            let params = this.serialize();
            params.keyword = this.keyword;
            this.dataTable.handlerParams(params);
        }
        /**
         * 点击了重置按钮
         */
        , onReset: function () {
            this.$refs.form.reset();
            this.onSubmit();
        }
        /**
         *
         * 序列化表单
         */
        , serialize: function () {
            return this.disabledForm ? {} : this.$refs.form.serialize();
        }
        /**
         * 表单设值
         */
        , val: function (obj) {
            this.$refs.form.val(obj);
            this.dataTable.setParams(this.serialize());
        }
    }
}
</script>